<template>
  <div class="wrap">
    <div class="content">
      <h2 class="title">餐馆登录入口</h2>
      <div class="main-content">
        <form>
          <p class="form-title">用户登录</p>
          <div class="form-text-input">
            <div class="icon-user"></div>
            <label>
              <input v-model="username" type="text" placeholder="请输入用户名">
            </label>
          </div>
          <div class="form-text-input">
            <div class="icon-password"></div>
            <label>
              <input v-model="password" type="password" placeholder="请输入密码">
            </label>
          </div>
          <div class="form-check-input">
            <label>
              <input type="checkbox">记住我的登录信息
            </label>
          </div>
          <div class="form-button">
            <button type="button" @click="tryToLogin">登录</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import {login} from "@/http/api/restaurant"
import response from "@/http/response";
import cookie from "js-cookie"

export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    async tryToLogin() {
      let result = await login({
        username: this.username,
        password: this.password,
      })

      switch (result.code) {

          // 请求成功
        case response.success:

          // 识别用户身份
          switch (result.data.identity) {

              // 无所属餐馆
            case 0:
              cookie.set('userId', result.data.userId)
              await this.$router.push({path: '/restaurant/common'})
              break

              // 拥有餐馆
            case 1:
              cookie.set('userId', result.data.userId)
              cookie.set('restaurantId', result.data.restaurantId)
              await this.$router.push({path: '/restaurant/master'})
              break

              // 已加入餐馆
            case 2:
              cookie.set('userId', result.data.userId)
              cookie.set('restaurantId', result.data.restaurantId)
              cookie.set('stafferId', result.data.stafferId)
              await this.$router.push({path: '/restaurant/staffer'})
              break
          }
          break

          // 存在空参数
        case response.paramLack:
          this.$message.warning(result.message)
          break

          // 用户名或密码错误
        case response.accountErr:
          this.$message.error(result.message)
          break

          // 未知异常
        default:
          this.$message.error(result.message)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  background: url("../../assets/images/restaurant/login/background.jpg") no-repeat;
  background-size: 100%;

  .content {
    height: 737px;

    .title {
      color: #FFF;
      font-size: 30px;
      width: 190px;
      margin: 0 auto;
      padding-top: 130px;
      font-weight: 500;
      line-height: 150%;
    }

    .main-content {
      background: url("../../assets/images/restaurant/login/form.png") repeat;
      width: 480px;
      height: 360px;
      border-radius: 8px;
      margin: 0 auto;

      .form-title {
        font-size: 16px;
        color: #FFF;
        width: 70px;
        margin: 0 auto;
        padding: 60px 0 0;
      }

      .form-text-input {

        width: 350px;
        height: 40px;
        margin-bottom: 25px;
        margin-left: 60px;

        .icon-user {
          background: url("../../assets/images/restaurant/login/user.png");
          background-size: 100%;
          width: 25px;
          height: 25px;
          left: 10px;
          top: 35px;
          position: relative;
        }

        .icon-password {
          background: url("../../assets/images/restaurant/login/password.png");
          background-size: 100%;
          width: 25px;
          height: 25px;
          left: 10px;
          top: 35px;
          position: relative;
        }

        input {
          width: 310px;
          line-height: 40px;
          font-size: 16px;
          background: none;
          color: #FFF;
          border: 2px solid #3872F6;
          border-radius: 4px;
          padding-left: 40px;
        }
      }

      .form-check-input {
        margin-top: 50px;
        margin-left: 60px;
        color: #FFF;
        width: 180px;
        cursor: pointer;
      }

      .form-button {
        width: 360px;
        height: 50px;
        margin-top: 15px;
        margin-left: 60px;

        button {
          width: 100%;
          height: 100%;
          background-color: #3872F6;
          color: #FFF;
          font-size: 15px;
          border-radius: 4px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>